<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    * {
      margin: 0;
      padding: 0;
    }

    body,
    html {
      height: 100%;
    }

    .layer-div {
      width: 100%;
      height: 100%;
      background-color: #0000007e;
      display: none;
    }
  </style>
</head>

<body>
  <button type="button" id="btn1">show Layer</button>
  <button type="button" id="btn2">close Layer</button>
  <!-- 
    调用封装的遮罩层插件, 公开一个 _layer的对象，对象有show(), close() 
    使用单例模式：
    每一次调用show(),始终只会有一个dom节点对象被插件，然后挂载到body下面。
    close()，删除这个节点。
  -->
  <script src="./js/demo2.js"></script>
  <script>
    let btn1 = document.querySelector("#btn1");
    let btn2 = document.querySelector("#btn2");

    btn1.onclick = function () {
      _layer.show();
    };
    btn2.onclick = function () {
      _layer.close();
    };

  </script>
</body>

</html>